<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13利用canvas绘制文本</title>
</head>
<body>
    <canvas id="oCanvas" width=500 height=700 style="border:2px solid black"></canvas>
    
</body>
<script>
    // 1.通过id获取canvas对象
    var canvas = document.getElementById("oCanvas");
    // 2.通过canvas对象获取2d画笔对象
    var ctx = canvas.getContext('2d');
    // 3.通过画笔对象绘图

    //绘制水平线

    // 新建一条路径
    ctx.beginPath();
    // 设置样式
    ctx.strokeStyle="gray";
    ctx.lineWidth=0.5;
    // 设置起始点
    ctx.moveTo(0,ctx.canvas.height/2);
    // 移动笔触
    ctx.lineTo(ctx.canvas.width,ctx.canvas.height/2);
    // 描边
    ctx.stroke();

    //绘制垂直线
    ctx.beginPath();
    ctx.strokeStyle="red";
    ctx.lineWidth=1;
    ctx.moveTo(ctx.canvas.width/2,0);
    ctx.lineTo(ctx.canvas.width/2,ctx.canvas.height);
    ctx.stroke();

    var txt = "我是你爹!";

    //绘制文本
    ctx.beginPath();
    // 设置样式

    // 设置水平方向对齐
    ctx.textAlign="center";
    // 设置垂直方向的基线
    ctx.textBaseline = "middle";
      
    ctx.font="40px 微软雅黑";
    // 绘制描边文本
                //文本 中心点的x 中心点的y  最大宽度
    ctx.strokeText(txt,ctx.canvas.width/2,ctx.canvas.height/2);
    ctx.stroke();

    // 文本填充
    ctx.fillStyle="gray";
                //文本 中心点的x 中心点的y  最大宽度
    ctx.fillText(txt,ctx.canvas.width/2,ctx.canvas.height/2);


    // 获取文本的宽度
    var textWid = ctx.measureText(txt).width;
    // 打印文本的宽度
    console.log(textWid);

    //画下划线
    ctx.beginPath();
    ctx.strokeStyle="blue";
    ctx.lineWidth=2;
    ctx.moveTo(ctx.canvas.width/2-textWid/2,ctx.canvas.height/2+20);
    ctx.lineTo(ctx.canvas.width/2+textWid/2,ctx.canvas.height/2+20);
    ctx.stroke();


</script>
</html>